<template>
  <div class="box">
    <el-card class="card" style="margin-bottom:10px">
      <h3><span>发现行业话题</span><span>挖掘人物观点</span></h3>
      <!-- 检索 -->
      <div class="s-box">
        <div class="search-box">
          <el-input
            placeholder="按人物、组织、发现相关话题或观点"
            v-model="searchTxt"
            class="search-inp"
            @keydown.enter.native="handleSearch"
          >
            <span slot="prefix" class="search-btn">检索内容</span>
          </el-input>
          <el-button type="primary" class="search-btn2" @click="handleSearch">检索</el-button>
        </div>
        <div class="hot">
          <span class="label">更多推荐：</span>
          <ul class="hot-list">
            <li v-for="(item, index) in hotList" :key="index" @click="handleSearch(item)">
              <i class="iconfont icon-shoucangzhuangtai"></i>
              <span>{{item}}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
    <div class="flex-box">
      <div class="flex-item-box">
        <el-card class="card2">
          <div class="flex">
            <div class="personage">
              <div class="logo-box">
                <div class="logo" :style="{'background-image': `url(${personage['logo']})`}"></div>
              </div>
              <p class="name">人物：{{personage['name']}}</p>
            </div>
            <ul class="list">
              <li v-for="(item, index) in personage['list']" :key="index">
                <p class="date">{{item.date}}</p>
                <p v-html="item.text" class="text"></p>
              </li>
            </ul>
          </div>
        </el-card>
      </div>
      <div class="flex-item-box">
        <el-card class="card2">
          <div class="flex">
            <div class="topic">
              <div class="logo-box">
                <div class="logo" :style="{'background-image': `url(${topic['logo']})`}"></div>
              </div>
              <p class="name">话题：{{topic['name']}}</p>
            </div>
            <ul class="list">
              <li v-for="(item, index) in topic['list']" :key="index">
                <p class="date">{{item.date}}</p>
                <p v-html="item.text" class="text"></p>
              </li>
            </ul>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTxt: '',
      hotList: ['章建华', '“十四五”', '2022年两会', '曹仁贤', '刘汉元'],
      personage: { // 人物
        name: '',
        logo: '',
        list: [
          {
            date: '2022-3-18',
            text: '习近平习近平习近平习近平习近平习近平习近平习近平习近平习近平习近平习近平习近平'
          }
        ]
      },
      topic: { // 话题
        name: '',
        logo: '',
        list: [
          {
            date: '2022-3-18',
            text: '习近平习近平习近平习近平习近平习近平习近平习近平习近平习近平习近平习近平习近平'
          }
        ]
      },
    }
  },
  methods: {
    handleSearch(item) {
      if (item) {
        this.searchTxt = item
      }
      this.$store.commit('setIndustryPointOfViewSearchTxt', this.searchTxt)
      this.$nextTick(() => {
        this.$router.push({
          name: 'IndustryPointOfViewResult'
        })
      })
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding: 10px;
  .card {
    h3 {
      position: relative;
      line-height: .53rem;
      margin-top: .2rem;
      margin-bottom: .3rem;
      text-align: center;
      font-weight: 400;
      font-size: .3rem;
      color: #396cff;
      span {
        display: inline-block;
        padding: 0 10px;
      }
    }
    .s-box {
      position: relative;
      margin-bottom: .24rem;
      text-align: center;
      .search-box {
        position: relative;
        display: inline-flex;
        align-items: center;
        .advanced-box {
          position: relative;
          display: inline-block;
          z-index: 3;
          height: .4rem;
          line-height: .4rem;
          margin-right: .2rem;
          .advanced-btn {
            // font-family: SourceHanSansCN-Medium;
            font-size: .16rem;
            color: $mainColor;
            cursor: pointer;
            span {
              display: inline-block;
              margin-right: .02rem;
            }
          }
        }
        .search-inp {
          width: 7.7rem;
          height: .4rem;
          margin-right: .14rem;
          vertical-align: middle;
          background-color: $color2;
          ::v-deep {
            ::placeholder {
              color: $color49 !important;
              // color: red !important;
            }
            .el-input__inner {
              height: .4rem;
              line-height: .4rem;
              padding-left: .95rem;
              padding-right: .15rem;
              border-color: $mainColor;
              border-radius: 6px;
              // font-family: SourceHanSansCN-Regular;
              font-size: .14rem;
              color: $color49;
              background-color: transparent;
            }
            .el-input__prefix {
              position: absolute;
              top: 0;
              left: 0;
              width: .8rem;
              line-height: .4rem;
              font-size: .14rem;
              color: $mainColor;
              &:after {
                position: absolute;
                top: 50%;
                right: 0;
                width: 1px;
                height: .32rem;
                margin-top: -.16rem;
                background-color: $color50;
                content: '';
              }
            }
            .el-input__prefix2 {
              position: relative;
              width: .64rem;
              padding: 0;
              border-color: $mainColor;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
              box-sizing: border-box;
              text-align: center;
              background-color: transparent;
              // cursor: pointer;
              .search-btn {
                display: block;
                width: 100%;
                text-align: center;
                font-size: .14rem;
                font-weight: bold;
                color: $mainColor;
                cursor: pointer;
              }
            }
          }
        }
        .search-btn2 {
          width: .96rem;
          height: .4rem;
          padding: 0;
          border-color: $mainColor;
          border-radius: 6px;
          box-sizing: border-box;
          // font-family: SourceHanSansCN-Regular;
          font-size: .16rem;
          font-weight: bold;
          letter-spacing: 1px;
          color: $color17;
          vertical-align: middle;
          background-color: $mainColor;
          &:hover {
            background-color: rgba(47,65,200,.8);
          }
        }
      }
    }
    .hot {
      position: relative;
      display: flex;
      align-items: center;
      width: 8.8rem;
      margin: .3rem auto 0;
      .label {
        width: 1rem;
        height: .26rem;
        line-height: .26rem;
        text-align: left;
        font-weight: 400;
        font-size: .14rem;
        color: #101010;
      }
      .hot-list {
        position: relative;
        width: calc(100% - 1rem);
        text-align: left;
        li {
          position: relative;
          display: inline-block;
          margin-right: .2rem;
          border: 1px solid #bbb;
          border-radius: 4px;
          cursor: pointer;
          i {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: .3rem;
            height: .24rem;
            line-height: .24rem;
            text-align: center;
            font-size: .14rem;
            color: #fff;
            background-color: #bbb;
          }
          span {
            display: inline-block;
            height: .24rem;
            line-height: .24rem;
            padding-left: calc(.3rem + .06rem);
            padding-right: .06rem;
            text-align: center;
            font-size: .14rem;
            color: #bbb;
          }
        }
      }
    }
  }
  .flex-box {
    position: relative;
    display: flex;
    .flex-item-box {
      width: calc((100% - 10px)/2);
      margin-right: 10px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .card2 {
    position: relative;
    width: 100%;
    padding: .2rem 0;
    height: calc(100vh - .7rem - 20px - 2.62rem - 20px);
    min-height: 300px;
    box-sizing: border-box;
    ::v-deep {
      .el-card__body {
        padding-left: 0;
      }
    }
    .flex {
      position: relative;
      display: flex;
      width: 100%;
      .personage, .topic {
        width: 40%;
        text-align: center;
        .name {
          line-height: .4rem;
          padding: 0 .1rem;
          font-size: .22rem;
          font-weight: 400;
          text-align: center;
          color: #333;
        }
      }
      .personage {
        .logo-box {
          position: relative;
          width: 60%;
          max-width: 150px;
          margin: 0 auto .2rem;
          .logo {
            position: relative;
            width: 100%;
            padding-top: 100%;
            border: 1px solid rgb(153, 153, 153);
            border-radius: 50%;
            box-sizing: border-box;
            box-shadow: rgba(0,0,0,.35) 1px 1px 5px 0px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            &:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .topic {
        .logo-box {
          position: relative;
          width: 70%;
          margin: 0 auto .2rem;
          .logo {
            position: relative;
            width: 100%;
            padding-top: 50%;
            border: 1px solid rgb(153, 153, 153);
            border-radius: 6px;
            box-sizing: border-box;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            &:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .list {
        width: calc(60% - .2rem);
        padding-left: .2rem;
        border-left: 1px solid rgba(199,227,246,1);
        margin-bottom: .1rem;
        li {
          position: relative;
          .date {
            display: inline-block;
            line-height: .16rem;
            padding: .04rem .08rem;
            margin-bottom: .1rem;
            font-size: .14rem;
            color: #333;
            background-color: rgba(199,227,246,1);
          }
          .text {
            position: relative;
            width: 100%;
            line-height: .2rem;
            text-indent: .1rem;
            font-size: .14rem;
            color: #333;
            word-wrap: break-word;
            word-break: break-all;
            &:before {
              position: absolute;
              top: calc(.1rem - 2px);
              left: 0;
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background-color: #333;
              content: '';
            }
          }
        }
      }
    }
  }
}
</style>